<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>an-button | an-ui</title>
    <style>
        html {
            box-sizing: border-box;
        }

        *,
        *:before,
        *:after {
            box-sizing: inherit;
        }

        html:focus {
            outline: none;
        }

        *:focus {
            outline: inherit;
        }
    </style>
    <link rel="stylesheet" href="style.css">
    <script type="module" src="/button/button.js"></script>
    <script type="module" src="/icons/close.js"></script>
</head>

<body>
    <an-button>
        默认
        <an-icon-close class="an-icon"></an-icon-close>
    </an-button>
    <an-button type="primary">主要</an-button>
    <an-button type="success">成功</an-button>
    <an-button type="warning">警告</an-button>
    <an-button type="danger">危险</an-button>

    <br>
    <br>

    <an-button size="small">small 尺寸</an-button>
    <an-button>默认</an-button>
    <an-button size="large">large 尺寸</an-button>

    <br>
    <br>

    <an-button round size="small">round small</an-button>
    <an-button round>round 默认</an-button>
    <an-button round size="large">round large</an-button>

    <br>
    <br>
    <an-button id="blockBtn" block>block 默认</an-button>
    <br>
    <br>
    <an-button id="disabledBtn" disabled>disabled 默认</an-button>
    <an-button id="loadingBtn" type="primary" loading>主要</an-button>
    <br>
    <br>

    <script>
        disabledBtn.addEventListener('click', function () {
            console.log(this)
        })
        loadingBtn.addEventListener('click', function () {
            console.log(this)
        })
        blockBtn.addEventListener('click', function () {
            console.log(this)
        })
    </script>
</body>

</html>